<template>
<!-- 用户主页 -->
  <div class="user">
    <header>
      <div class="user-list">
        <div class="img">
          <img :src="info.avatarUrl" alt="" />
        </div>
        <div class="top">
          <h4>{{ info.nickname }}</h4>
          <h6 class="iconfont icon-shouye"></h6>
        </div>
        <div class="bottom">
          <span @click="tofollow(0)">{{ follow.length }} 关注</span>
          <span @click="tofollow(1)">{{ fans.length }} 粉丝</span>
          <span  @click="tofollow(2)">{{grade.level}} 等级</span>
        </div>
      </div>
    </header>
    <nav>
      <van-grid :column-num="3" :border="false">
        <van-grid-item icon="star" text="收藏" @click="$router.push({name:'userCollection'})" />
        <van-grid-item icon="play-circle" text="播放记录" @click="toPlayBack" />
        <van-grid-item icon="comment" text="歌单"  @click="$router.push({name:'usercomment'})"/>
      </van-grid>
    </nav>
    <main @click="$router.push({name:'lovemusic'})">
      <h5 class="iconfont icon-aixin2"></h5>
      <div>我喜欢的音乐</div>
      <span>{{musicid.length}} 首</span>
    </main>
    <van-button type="primary" block color="#ff5656" @click="signout">退出登录</van-button>
    <span
      class="ret iconfont icon-row-full"
      @click="$router.push({ name: 'recommend' })"
    ></span>
  </div>
</template>

<script>
import {
  getAccountNumber,
  getUserDetails,
  getUserFollow,
  getfans,
  getGrade,
  getsignout
} from "../api/userinfo";
import { getlovemusic} from '../api/lovemusic'
export default {
  data() {
    return {
      id: "",
      info: "",
      follow: "",
      fans: "",
      grade:"",
      musicid:''
    };
  },
  methods: {
    tofollow(option) {
      if (option == 0) {
        this.$router.push({
          name: "userfollow",
          params: {
            follow: this.follow,
            options:option
          },
        });
      } else if(option==1) {
        this.$router.push({
          name: "userfollow",
          params: {
            follow: this.fans,
            options:option
          },
        });
      } else{
            this.$router.push({
          name: "userfollow",
          params: {
            options:option,
            grade:this.grade
          },
        });
      }
    },
    toPlayBack(){
      this.$router.push({
        name:'PlayBack',
      })
    },
    signout(){
      getsignout().then(data=>{
        if(data.code===200){
        localStorage.removeItem("uid");
        localStorage.removeItem("token");
        this.$router.push({
          name:"login"
        })}
      })
    }
  },
  async created() {
    let user = await getAccountNumber();
    console.log( user);
    this.id = user.account.id;
    let userlist = await getUserDetails({ uid: user.account.id });
    this.info = userlist.profile;

    this.follow = (await getUserFollow({ uid: this.id })).follow;
    this.fans = (await getfans({ uid: this.id })).followeds;
this.grade=(await getGrade({ uid: this.id })).data;
 this. musicid =(await  getlovemusic(this.id)).ids;
  },
};
</script>

<style lang="less" scoped>
.user {
  position: relative;
  padding: 0 14px;
  height: 100%;
  background: url(../assets/0.png) no-repeat center center;
  background-size: 100% 100%;
  .ret {
    font-size: 22px;
    position: absolute;
    left: 16px;
    top: 14px;
    color: #fff;
    font-weight: bold;
  }
}
header {
  padding-top: 120px;
  margin-bottom: 16px;
}
.user-list {
  position: relative;
  height: 102px;
  border-radius: 10px;
  background-color: #fff;
  padding-top: 38px;
  box-sizing: border-box;
  .img {
    position: absolute;
    left: 50%;
    top: -34%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .top {
    display: flex;
    justify-content: center;
    h4 {
      font-size: 20px;
      margin-right: 12px;
    }
    h6 {
      color: #fff;
      background-color: #ccc;
      width: 52px;
      height: 16px;
      border-radius: 10px;
      margin-top: 10px;
      text-align: center;
      line-height: 16px;
    }
  }
  .bottom {
    margin-top: 12px;
    color: #ccc;
    font-size: 12px;
    text-align: center;
    span {
      padding: 0 8px;
    }
    & > span:nth-child(2) {
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
  }
}
nav {
  .van-grid {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
  }
}
main {
  width: 100%;
  display: flex;
  height: 80px;
  background-color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 16px;
  box-sizing: border-box;
  h5 {
    width: 46px;
    height: 46px;
    font-size: 22px;
    line-height: 46px;
    background-color: #f2f3f4;
    text-align: center;
    border-radius: 10px;
  }
  div {
    line-height: 46px;
    margin-left: 16px;
  }
  span {
    line-height: 46px;
    font-size: 12px;
    margin-left: 94px;
  }
}
.van-button {
  margin-top: 100px;
}
</style>